import React from 'react';
import styled from 'styled-components/native';
import Touchable from '@appandflow/touchable';

import { colors, dimens } from '../utils/constants';

const HEIGHT = dimens.TAB_BAR_SIZE;

const Button = styled(Touchable).attrs({
  feedback: 'opacity'
})`
  height: ${ HEIGHT };
  align-items: center;
  justify-content: center;
`;

const UnClickableButton = styled.View`
  height: ${ HEIGHT };
  align-items: center;
  justify-content: space-between;
  padding-vertical: 4;
`;

const Title = styled.Text`
  font-size: 12;
  color: ${ props => props.color ? props.color : colors.PRIMARY_TEXT }
`;

export default function TabbarItem({ children, title, color, onPressed }) {
  if (onPressed) {
    return (
      <Button onPress={onPressed}>
        {children}
        {title && <Title color={color}>{title}</Title> }
      </Button>
    );
  }
  return (
    <UnClickableButton>
      {children}
      { title && <Title color={color}>{title}</Title> }
    </UnClickableButton>
  );
}
